<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交易数据</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }

        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

    </style>
</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理
            <small>交易数据</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>交易数据</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">


        <div class="filter-container">
            <!--查询表单-->
            <el-form :inline="true">
                <span>交易数据&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="fetchData()">
                </el-date-picker>
            </el-form>
        </div>

        <!--average_money: 2429444
            browse_number: 1888
            deal_time: "2019-07-10"
            id: 1
            orderform_number: 144
            orderitem_money: 190587171
            orderitem_num: 643
            orderitem_pay_money: 196784999
            orderlog_number: 55
            orders_number: 80
            orderstatus_number: 130
            payment_number: 381
            payment_orderform: 81
            refund_amount: 104601-->

        <el-table :data="tableData2" border style="width: 1081px">
            <el-table-column prop="browse_number" label="浏览人数" width="180" align="center"></el-table-column>
            <el-table-column prop="orders_number" label="下单人数" width="180" align="center"></el-table-column>
            <el-table-column prop="orderform_number" label="订单数" width="180" align="center"></el-table-column>
            <el-table-column prop="orderitem_num" label="下单件数" width="180" align="center"></el-table-column>
            <el-table-column prop="orderstatus_number" label="有效订单数" width="180" align="center"></el-table-column>
            <el-table-column label="下单金额" width="180" align="center">
                <template slot-scope="scope">
                    <span>&yen;</span>
                    {{(scope.row.orderitem_money/100).toFixed(2)}}
                </template>
            </el-table-column>
        </el-table>
        <el-table :data="tableData2" border style="width: 1081px">
            <el-table-column label="退款金额" width="180" align="center">
                <template slot-scope="scope">
                    <span>&yen;</span>
                    {{(scope.row.refund_amount/100).toFixed(2)}}
                </template>
            </el-table-column>
            <el-table-column prop="orderlog_number" label="付款人数" width="180" align="center"></el-table-column>
            <el-table-column prop="payment_orderform" label="付款订单数" width="180" align="center"></el-table-column>
            <el-table-column prop="payment_number" label="付款件数" width="180" align="center"></el-table-column>
            <el-table-column label="付款金额" width="180" align="center">
                <template slot-scope="scope">
                    <span>&yen;</span>
                    {{(scope.row.orderitem_pay_money/100).toFixed(2)}}
                </template>
            </el-table-column>
            <el-table-column label="客单价" width="180" align="center">
                <template slot-scope="scope">
                    <span>&yen;</span>
                    {{(scope.row.average_money/100).toFixed(2)}}
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div id="main" style="width:1081px ;height: 400px"></div>

</div>
</body>

<script src="/js/util.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/echarts.common.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                tableData2: [{
                    browse_number: 0,
                    orders_number: 0,
                    orderform_number: 0,
                    orderitem_num: 0,
                    orderstatus_number: 0,
                    orderitem_money: 0,
                    refund_amount: 0,
                    orderlog_number: 0,
                    payment_orderform: 0,
                    payment_number: 0,
                    orderitem_pay_money: 0,
                    average_money: 0
                }],
                dateRange: []
            }
        },
        methods: {
            fetchData() {
                this.tableData2[0].browse_number = 0;
                this.tableData2[0].orders_number = 0;
                this.tableData2[0].orderform_number = 0;
                this.tableData2[0].orderitem_num = 0;
                this.tableData2[0].orderstatus_number = 0;
                this.tableData2[0].orderitem_money = 0;
                this.tableData2[0].refund_amount = 0;
                this.tableData2[0].orderlog_number = 0;
                this.tableData2[0].payment_orderform = 0;
                this.tableData2[0].payment_number = 0;
                this.tableData2[0].orderitem_pay_money = 0;
                this.tableData2[0].average_money = 0;

                let date1 = this.dateRange[0].Format('yyyy-MM-dd');
                let date2 = this.dateRange[1].Format('yyyy-MM-dd');
                axios.get(`/orderDeal/orderDealfindByTime.do?date1=${date1}&date2=${date2}`).then(response => {
                    this.tableData = response.data;

                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData2[0].browse_number += this.tableData[i].browse_number;
                        this.tableData2[0].orders_number += this.tableData[i].orders_number;
                        this.tableData2[0].orderform_number += this.tableData[i].orderform_number;
                        this.tableData2[0].orderitem_num += this.tableData[i].orderitem_num;
                        this.tableData2[0].orderstatus_number += this.tableData[i].orderstatus_number;
                        this.tableData2[0].orderitem_money += this.tableData[i].orderitem_money;
                        this.tableData2[0].refund_amount += this.tableData[i].refund_amount;
                        this.tableData2[0].orderlog_number += this.tableData[i].orderlog_number;
                        this.tableData2[0].payment_orderform += this.tableData[i].payment_orderform;
                        this.tableData2[0].payment_number += this.tableData[i].payment_number;
                        this.tableData2[0].orderitem_pay_money += this.tableData[i].orderitem_pay_money;
                        this.tableData2[0].average_money += this.tableData[i].average_money;
                    }

                    let time = [];
                    let orderitem_pay_money = [];//付款金额
                    let refund_amount = [];//退款金额
                    let orderlog_number = [];//付款人数
                    let payment_number = [];//付款件数

                    let x = [];//下单转化率= 下单人数/浏览人数
                    let f = [];//付款转化率=付款人数/下单人数
                    let c = [];//成交转化率=付款人数/浏览人数

                    for (let i = 0; i < this.tableData.length; i++) {
                        time.push({name: this.tableData[i].id, value: this.tableData[i].deal_time});
                        orderitem_pay_money.push({name: this.tableData[i].id,value: ((this.tableData[i].orderitem_pay_money / 100).toFixed(2))});
                        refund_amount.push({name: this.tableData[i].id,value: ((this.tableData[i].refund_amount / 100).toFixed(2))});
                        orderlog_number.push({name: this.tableData[i].id, value: this.tableData[i].orderlog_number});
                        payment_number.push({name: this.tableData[i].id, value: this.tableData[i].payment_number});

                        x.push({name: this.tableData[i].id, value: ((this.tableData[i].orders_number/this.tableData[i].browse_number).toFixed(2))*100});
                        f.push({name: this.tableData[i].id, value: (this.tableData[i].orderlog_number/this.tableData[i].orders_number).toFixed(2)*100});
                        c.push({name: this.tableData[i].id, value: (this.tableData[i].orderlog_number/this.tableData[i].browse_number).toFixed(2)*100});
                    }

                    let myChart = echarts.init(document.getElementById('main'));
                    let option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['付款金额', '退款金额', '付款人数', '付款件数', '下单转化率', '付款转化率', '成交转换率']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: time,
                        },
                        yAxis: [
                            {
                                type: 'value',
                                min: 0,
                                max: 10000,
                            },
                            {
                                type: 'value',
                                name: '转化率',
                                min: 0,
                                max: 150,
                                axisLabel: {
                                    formatter: '{value} %'
                                }
                            }
                            ],

                        series: [
                            {
                                name: '付款金额',
                                type: 'line',
                                data: orderitem_pay_money
                            },
                            {
                                name: '退款金额',
                                type: 'line',
                                data: refund_amount
                            },
                            {
                                name: '付款人数',
                                type: 'line',
                                data: orderlog_number
                            },
                            {
                                name: '付款件数',
                                type: 'line',
                                data: payment_number
                            },
                            {
                                name: '下单转化率',
                                type: 'line',
                                yAxisIndex: 1,
                                data: x
                            },
                            {
                                name: '付款转化率',
                                type: 'line',
                                yAxisIndex: 1,
                                data: f
                            },
                            {
                                name: '成交转换率',
                                type: 'line',
                                yAxisIndex: 1,
                                data: c
                            }
                        ]
                    };
                    myChart.setOption(option);
                })
            }
        }
    })
</script>
</html>
